<template>
	<view class="page">
		<view class="title">
			4.5.组件中emit的声明触发事件
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/essentials/template-syntax.html" text="模板语法"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			emit主要用于子组件向父组件传递数据或触发父组件方法。常用的场景有数据表单提交，子组件状态改变通知，子组件操作结果反馈，分页组件页码切换等。一下是个用户提交表单的DEMO
		</view>
		<view class="p">
			<FormSubmit @form-submit="getformsubmit"></FormSubmit>
		</view>
		<view class="box" v-for="(item, index) in getusercoments" :key="index" style="margin-bottom: 24rpx;">
			<view class="flex">
				<view class="left">
					<image src="https://image.uisdc.com/wp-content/uploads/2018/06/avatar-uisdc-chat.png"
						mode="widthFix" class="img"></image>
				</view>
				<view class="item">
					<view class="h2">
						{{item.username}}
					</view>
					<view class="des">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const getusercoments = ref([])
	const getformsubmit = (formData) => {
		getusercoments.value = [...getusercoments.value, formData]
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 80rpx;
		margin-right: 24rpx;

		.img {
			width: 80prx
		}
	}

	.h2 {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.des {
		color: #666;
		word-wrap: break-word;
		word-break: break-word;
		line-height: 1;
	}
</style>